import React from 'react'
import {connect,} from 'react-redux'
import FootballGameCard from "../../../../shared-components/FootballGameCard/FootballGameCard"
import {GameDataArrayToObject, GameDataObjectFinalized,} from "../../../../redux/game"
import NoDataPage from "../NoDataPage/NoDataPage";
import EventFilterList from "../EventFilterList/EventFilterList";
import GameListHandler from "../../../../model/GameList";
import {formatDate, handleDateChange} from "../../../../utils/dateService";
import LocalStorageService from "../../../../utils/LocalStorageService";
import {behaviorReq} from "../../../../apis/goApis";

class AllGame extends React.Component {

    // constructor(props) {
    //
    //     super(props)
    //     this.state = {
    //         gameListHandler: null,
    //     }
    // }

    componentDidMount() {
        // this.setHandler()
        const isLogin = LocalStorageService.get('userid')
        if (isLogin) {
            behaviorReq({
                userid: LocalStorageService.get('userid'),
                handle: '全部',
            })
        }
    }

    // componentDidUpdate(prevProps, prevState, snapshot) {
    //     const today = this.props.today
    //     const prevToday = prevProps.today
    //     if (today !== prevToday) {
    //         this.setHandler()
    //     }
    //     const inc = this.props.includeYesterdayMatch
    //     const incPrev = prevProps.includeYesterdayMatch
    //     if (incPrev !== inc && inc) {
    //         this.setHandler()
    //     }
    //
    //     // const games = this.props.game.games
    //     // if (games[today] && prevProps.game.games[today]) {
    //     //     const {matches,} = games[today]
    //     //     const prevMatches = prevProps.game.games[today].matches
    //     //     if (matches.length > 1 && matches.length !== prevMatches.length) {
    //     //         this.setHandler()
    //     //     }
    //     // }
    // }
    //
    // setHandler = () => {
    //     const today = this.props.today
    //     const games = this.props.game.games
    //     let {
    //         teams,
    //         events,
    //         stages,
    //         matches,
    //     } = games[today]
    //
    //     const inc = this.props.includeYesterdayMatch
    //     if (inc) {
    //         console.log('in')
    //         const yesterday = formatDate(handleDateChange(today, -1))
    //         const yesGames = games[yesterday]
    //         teams = {...yesGames.teams, ...teams}
    //         events = {...yesGames.events, ...events}
    //         stages = {...yesGames.stages, ...stages}
    //         matches = [...yesGames.matches, ...matches]
    //     }
    //     // const today = this.props.today
    //
    //
    //     this.setState({
    //         gameListHandler: new GameListHandler({matches, teams, events, stages})
    //     })
    // }


    render() {

        const games = this.props.game.games
        const today = this.props.today
        const yesterday = formatDate(handleDateChange(today, -1))
        const eventFilters = this.props.eventFilters
        const inc = this.props.includeYesterdayMatch

        if (!games[today]) return <div className='game-list-ctn' />

        let {
            teams,
            events,
            stages,
            matches,
        } = games[today]

        const yesGames = games[yesterday]
        if (inc && yesGames) {
            teams = {...yesGames.teams, ...teams}
            events = {...yesGames.events, ...events}
            stages = {...yesGames.stages, ...stages}
            matches = [...yesGames.matches, ...matches]
        }

        let matchesAfterFilter = []

        if (eventFilters.length > 0) {
            for (let i = 0; i < matches.length; i++) {
                let match = matches[i]
                if (eventFilters.find(event => event.value.id === match[1])) {
                    matchesAfterFilter.push(match)
                }
            }
            if (matchesAfterFilter.length > 0) {
                let isAllEnded = matchesAfterFilter.every(match => match[2] >= 8)
                if (isAllEnded) {
                    this.props.changeGameTabPosition({
                        position: 3,
                        depth: 1,
                    })
                    this.props.changeGameTabPosition({
                        position: 3,
                        depth: 2,
                        type: 'result'
                    })
                }
            }
        }


        const handler = new GameListHandler({teams, matches, stages, events,})
        const matchesSchedule = handler.getMatches('schedule')
        const matchesLive = handler.getMatches('live')
        const matchesCancel = handler.getMatches('cancel')
        let matchesToRender = [...matchesLive, ...matchesSchedule]
        if (matchesToRender.length === 0) {
            matchesToRender = [...matchesCancel]
        }

        const matchesRender = (matches) => {
            let handler = new GameListHandler({matches, teams, events, stages,})
            let list = handler.listAll()
            const hot = this.props.hot
            if (hot) {
                const hots = this.props.hots
                list = list.filter(game => {
                    const event = game.event
                    const names = [event.name_zh, event.short_name_zh,]
                    let isHot = false
                    names.map(name => {
                        hots.map(hot => {
                            if (name === hot) {
                                isHot = true
                            }
                        })
                    })
                    return isHot
                })
            }
            let template = list.map(game => <FootballGameCard game={game} key={game.matchId}/>)
            return list.length > 0 ? template : <NoDataPage/>
        }

        return <div className='game-list-ctn'>
            <EventFilterList
                // height={this.state.height}
                matches={matchesToRender}
                render={matchesRender}
            />
        </div>

    }
}

const mapState = (state) => ({
    game: state.game,
    today: state.game.today,
    eventFilters: state.game.eventFilters,
})

const mapDispatch = (dispatch) => ({
    doFetchGameList: (payload) => dispatch.game.doFetchGameList(payload),
    doFetchGameListAll: (payload) => dispatch.game.doFetchGameListAll(payload),
    doRefreshGameListAll: (payload) => dispatch.game.doRefreshGameListAll(payload),
    changeGameTabPosition: (payload) => dispatch.game.changeGameTabPosition(payload),
})

export default connect(mapState, mapDispatch)(AllGame)

